<template>
  <div class="panel hot-recommend-panel">
    <div class="panel-header">
      <i class="fas fa-fire" />
      <span>热门推荐</span>
    </div>
    <div class="recommend-list">
      <!-- 编辑推荐 -->
      <div v-if="editorRecommend.length > 0" class="recommend-section">
        <div class="section-title">
          <i class="fas fa-star" />
          编辑推荐
        </div>
        <div
          v-for="(item, index) in editorRecommend.slice(0, 3)"
          :key="item.id"
          class="recommend-item"
          @click="goToArticle(item.id)"
        >
          <div class="recommend-rank" :class="{ 'top-rank': index < 3 }">
            {{ index + 1 }}
          </div>
          <div class="recommend-content">
            <h4 class="recommend-title">{{ item.title }}</h4>
            <div class="recommend-meta">
              <span class="meta-item">
                <i class="fas fa-eye" />
                {{ formatNumber(item.views) }}
              </span>
              <span class="meta-item">
                <i class="fas fa-heart" />
                {{ formatNumber(item.likes) }}
              </span>
            </div>
          </div>
        </div>
      </div>

      <!-- 本周热门 -->
      <div v-if="weeklyHot.length > 0" class="recommend-section">
        <div class="section-title">
          <i class="fas fa-chart-line" />
          本周热门
        </div>
        <div
          v-for="(item, index) in weeklyHot.slice(0, 3)"
          :key="item.id"
          class="recommend-item"
          @click="goToArticle(item.id)"
        >
          <div class="recommend-rank" :class="{ 'top-rank': index < 3 }">
            {{ index + 1 }}
          </div>
          <div class="recommend-content">
            <h4 class="recommend-title">{{ item.title }}</h4>
            <div class="recommend-meta">
              <span class="meta-item">
                <i class="fas fa-eye" />
                {{ formatNumber(item.views) }}
              </span>
              <span class="meta-item">
                <i class="fas fa-fire" />
                热度 {{ item.hotScore }}
              </span>
            </div>
          </div>
        </div>
      </div>

      <!-- 相关推荐 -->
      <div v-if="relatedArticles.length > 0" class="recommend-section">
        <div class="section-title">
          <i class="fas fa-lightbulb" />
          相关推荐
        </div>
        <div
          v-for="item in relatedArticles.slice(0, 3)"
          :key="item.id"
          class="recommend-item simple"
          @click="goToArticle(item.id)"
        >
          <div class="recommend-content">
            <h4 class="recommend-title">{{ item.title }}</h4>
            <div class="recommend-meta">
              <span class="meta-item">
                <i class="fas fa-tag" />
                {{ item.category }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';

const router = useRouter();

// 编辑推荐数据
const editorRecommend = ref([
  {
    id: 1,
    title: 'Vue 3 Composition API 最佳实践指南',
    views: 3420,
    likes: 128
  },
  {
    id: 2,
    title: 'TypeScript 高级类型系统深入解析',
    views: 2156,
    likes: 95
  },
  {
    id: 3,
    title: '前端性能优化：从入门到精通',
    views: 1876,
    likes: 87
  }
]);

// 本周热门数据
const weeklyHot = ref([
  {
    id: 4,
    title: 'React 18 新特性完整指南',
    views: 5234,
    likes: 234,
    hotScore: 98
  },
  {
    id: 5,
    title: 'JavaScript 异步编程实战技巧',
    views: 4123,
    likes: 189,
    hotScore: 92
  },
  {
    id: 6,
    title: 'CSS Grid 布局完全指南',
    views: 3456,
    likes: 156,
    hotScore: 85
  }
]);

// 相关推荐数据
const relatedArticles = ref([
  {
    id: 7,
    title: 'Node.js 微服务架构设计',
    category: '后端开发'
  },
  {
    id: 8,
    title: 'Docker 容器化部署最佳实践',
    category: 'DevOps'
  },
  {
    id: 9,
    title: '数据库查询优化技巧总结',
    category: '数据库'
  }
]);

// 跳转到文章详情
const goToArticle = (id: number) => {
  router.push({
    name: 'blogViewShow',
    params: { blogId: String(id) }
  });
};

// 格式化数字
const formatNumber = (num: number) => {
  if (num >= 10000) {
    return (num / 10000).toFixed(1) + 'w';
  } else if (num >= 1000) {
    return (num / 1000).toFixed(1) + 'k';
  }
  return num.toString();
};
</script>

<style scoped lang="scss">
.panel {
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 16px;
}

.panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 16px;
  font-size: 1rem;

  i {
    color: #f59e0b;
    font-size: 1.1rem;
  }
}

.recommend-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.recommend-section {
  .section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 10px;

    i {
      font-size: 0.8rem;
      color: #f59e0b;
    }
  }
}

.recommend-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;

  &:hover {
    background: #f8fafc;
    transform: translateX(2px);
  }

  &.simple {
    padding-left: 0;
    padding-right: 0;

    &:hover {
      background: transparent;
      transform: translateX(4px);
    }
  }

  .recommend-rank {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: #f1f5f9;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;

    &.top-rank {
      background: linear-gradient(135deg, #f59e0b, #f97316);
      color: white;
    }
  }

  .recommend-content {
    flex: 1;
    min-width: 0;

    .recommend-title {
      font-size: 0.85rem;
      font-weight: 500;
      color: #1e293b;
      margin: 0 0 6px 0;
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .recommend-meta {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 0.75rem;
      color: #94a3b8;

      .meta-item {
        display: flex;
        align-items: center;
        gap: 4px;

        i {
          font-size: 0.7rem;
        }
      }
    }
  }
}

/* 动画效果 */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.recommend-item {
  animation: slideIn 0.3s ease-out;
}
</style>